<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script type="text/javascript" src="../../js/vue.js"></script>

</head>
<body>
    <div id="root">
        <h3>{{msg}}</h3>
        <hr>
        <hello></hello>
        <hr>
        <!-- 3 编写组件标签 -->
        <school></school>
        <hr>
        <student></student>
    </div>

    <!-- 容器2 -->
    <div id="root2">
        <hello></hello>
        <hr>
      
    </div>
</body>

<script type="text/javascript">
    Vue.config.performance = false

    // 1 创建组件 -- 局部组件
    const school = Vue.extend({
        // el:'#root', --一定不要写el
        template: `
            <div>
                <h4>学校名称：{{schoolName}}</h4>
                <h4>学校地址：{{addr}}</h4>
                <button @click="showName">点击提示学校名</button>
            </div>
        `,
        data(){
            return {
                schoolName:'浙大',
                addr:'浙江杭州',
            }
        },
        methods: {
            showName() {
                alert(this.schoolName)
            },
        },
    });

    const student = Vue.extend({
        template:`
            <div>
                <h4>学生姓名：{{studentName}}</h4>
                <h4>学生年龄：{{age}}</h4>
            </div>
        `,
        data(){
            return {
                studentName:'张三',
                age:18,
            }
        }
    });

    // 创建全局组件
    const hello = Vue.extend({
        template:`
            <div>
                <h5>你好 {{name}}</h5>    
            </div>
        `,
        data(){
            return {
                name:'vue',
            }
        }
    });

    // 全局注册组件
    Vue.component('hello',hello)

    //创建vm
    const vm = new Vue({
        el:'#root',
        data:{
            msg:'hello',
        },
        // 2 注册组件
        components:{
            school:school,
            student
        }
    })

    new Vue({
        el:'#root2',
    })

</script>
</html>